<template>
	<view class="page">
		<view class="title">
			3.7.v-if条件渲染及v-show的选择对比
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://cn.vuejs.org/guide/essentials/conditional.html" text="条件渲染 v-if"
				color="#007BFF"></uni-link>
		</view>
		<view class="p">
			v-if 主要做条件判断，只会在指令的表达式返回真值时才被渲染，反之则不显示。
		</view>
		<view class="p">
			<view class="grid" style="gap: 36rpx;">
				<view class="box" v-if="true">
					v-if 语法 可以直接等于 true 或者 fales
				</view>
				<view class="box" v-if="shop">
					也可以直接等于非true/fales 的任何变量 但是需要在js里面定义这个变量的值 或者判断条件
				</view>
				<view class="box">
					也可以直接显示表达式 类似 day === 1 显示星期一
				</view>
				<view class="box">
					有if 也会有else 和 else if
				</view>
			</view>
		</view>

		<view class="p red-bg">
			最大的使用场景就是登录页面的用户登录状态和非登录状态使用v-if 和 else
		</view>
		<view class="p">
			如果碰到层级问题，例如组件A中包含一个title 一个 des 和 一张图。其中 des 和图片 需要做if判断。这时候就无法使用view盒子包裹，可以使用template配上v-if 即可。
		</view>
		<view class="p red bold">
			假如v-if 和 v-else 两个块元素中间就不能放任何东西了会报错！！！
		</view>
		<view class="p">
			v-show 则是只给view做了dom隐藏，依旧会渲染这个dom结构。
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const shop = ref(true)
</script>

<style lang="scss" scoped>

</style>